﻿@{
    ViewBag.Title = "Compose";
    Layout = "~/Views/Shared/_AdminLayout.cshtml";
}

@section ScriptSection
{
    <script type="text/javascript" src='@this.Url.Content("~/Scripts/CKEditor/ckeditor.js")'></script>
    <script type="text/javascript">
        $(function () {
            var css = appPath + 'Content/common.css';
            var config = {
                height: '400px',
                entities: 'false',
                contentsCss: css
            };
            var editor = CKEDITOR.replace('PostEditor', config);
            $('#PublishDate').datepicker();

            var post = new DraftPost();
            post.loadJson(@Html.Raw(ViewBag.Json));
            post.editor(editor);
            post.ie(navigator.userAgent.indexOf('MSIE') != -1);
            ko.applyBindings(post, document.getElementById("main"));

            $('#fileUploadProxy').click(function () {
                $('#fileUpload').click();
            });

            $('#fileUpload').fileupload({
                url: appPath + 'Post/Upload',
                dataType: 'json',

                done: function (e, data) {
                    for (var idx = 0; idx < data.result.length; idx++)
                        post.attachments.push(new Attachment(post.attachments, data.result[idx]));
                    setTimeout(function () { $('#progress .bar').css('width', '0%') }, 1000);
                },
                progressall: function (e, data) {
                    // Update the progress bar while files are being uploaded
                    var progress = parseInt(data.loaded / data.total * 100, 10);
                    $('#progress .bar').css(
                        'width',
                        progress + '%'
                    );
                }
            });
        });
    </script>
}
<div id="main">
    <h1>Compose</h1>
    <div class="tabs">
        <input type="button" class="tab active-tab" data-bind="click: composeMain" value="Main" />
        <input type="button" class="tab" data-bind="click: composeMeta" value="Meta" />
        <input type="button" class="tab" data-bind="click: preview" value="Preview" />
    </div>
    <div data-bind="visible: isMain">
        <div class="left-compose">
            <div>Title: </div>
            <div>
                <input type="text" data-bind="value: title, valueUpdate: 'afterkeydown', css: { 'errorBox': title.hasError }" />
            </div>
            <div>
                Attachments:
                <ul data-bind="foreach: attachments">
                    <li><span data-bind="text: path"></span><a href="#" data-bind="click: deleteAttachment" class="cutebtn">x</a></li>
                </ul>
            </div>
            <div>
                Post Contents:
                <textarea id="PostEditor" name="Content" style="width: 530px;" cols="30" rows="10" data-bind="value: body"></textarea>
            </div>
        </div>
        <div class="right-compose">
            <div>
                Publish date:
            </div>
            <div>
                <input type="text" id="PublishDate" style="width: 80%;" data-bind="value: time, attr: {disabled: published}" />
            </div>
            <div>
                Category:
            </div>
            <div>
                <select multiple data-bind="options: categories, selectedOptions: selectedCategories, optionsValue: function(item) { return item.id }, optionsText: function(item) { return item.name }"></select>
            </div>
            <div>
                Upload files:
            </div>
            <div>
                <input type="button" value="Upload" id="fileUploadProxy" />
                <input type="file" id="fileUpload" multiple />
            </div>
            <div style="line-height: 40px">
                <span style="color: #fff; background-color: #f00; font-weight: bold; padding: 4px; font-size: .8em" data-bind="visible: ie">USING IE? MAY NOT WORK</span>
                <div id="progress" class="progressbar" style="width: 80%">
                    <div class="bar"></div>
                </div>
            </div>
        </div>
        <div class="clear"></div>
    </div>
    <div class="meta-compose" data-bind="visible: isMeta">
        <div>
            Meta:
        </div>
        <div>
            <textarea name="Meta" cols="20" rows="3" data-bind="value: meta"></textarea>
        </div>
        <div>
            Tags:
        </div>
        <div>
            <select multiple style="width: 300px" data-bind="options: tags, selectedOptions: selectedTags, optionsValue: function(item) { return item.id }, optionsText: function(item) { return item.name }"></select>
        </div>
    </div>
    <div data-bind="visible: isPreview">
        @Html.Partial("Preview")
    </div>
    <div class="success" data-bind="visible: successMessage, text: successMessage">
    </div>
    <div class="error" data-bind="visible: errorMessage, html: errorMessage">
    </div>
    <div class="button-compose">
        <input type="button" value="Save" data-bind="click: save" />
        <input type="button" value="Publish" data-bind="click: publish" />
        <input type="button" data-bind="click: close" value="Close" />
    </div>
</div>
